<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <title>美食首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 100px;
        }

        body {
            font-size: .22rem;
        }

        .header {
            width: 100%;
            height: 100px;
            /*background-color:pink;*/
        }

        .header .header-one {
            width: 100%;
            height: 50px;
            background-color: #0085ff;
            position: relative;
            overflow: hidden;
        }

        .content {
            width: 7.2rem;
            margin: 0 auto;
            overflow: auto;
        }

        .header-two {
            height: 50px;
            margin-top: 3px;
            display: flex;
            text-decoration: none;
        }

        .header-two a {
            flex: 1;
            text-align: center;
            color: #666;
            position: relative;
            font-size: .29rem;
            z-index: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-decoration: none;
            margin-top: 13px;
        }

        .header-two span {
            text-align: center;
            color: #666;
            white-space: nowrap;
            margin-left: 3px;
        }

        .categories-2omWP_0 {
            display: inline-block;
            flex: 1;
            /*height: 1.066667rem;*/
            padding-left: .23rem;
            padding-bottom: .15rem;
            overflow-x: scroll;
            white-space: nowrap;
        }

        .categories-22vDu_0.categories-1l5jO_0 {
            font-weight: 700;
            border-bottom: 2px solid #fff;
            opacity: 1;
            margin-top: 7px;

        }
        .categories-22vDu_0 {
            display: inline-block;
            margin-right: .746667rem;
            padding: .3rem   0.0001rem;
            font-size: .26rem;
            line-height: 1px;
            color: #fff;
            opacity: .7;
        }
        .categories-2ylKB_0 {
            position: absolute;
            height: 50px;
            width: 60px;
            display: flex;
            -webkit-justify-content: center;
            justify-content: center;
            align-items: center;
            background-color: #0085ff;
            top: 0;
            right: 0;
            z-index: 10;
        }
        .swapper7{
            width: 100%;
            height: 1300px;
            position: relative;
            overflow: hidden;
        }
        .swapper7 .cxk{
            width: 100%;
            height: 180px;
            margin-top: 20px;

        }
        .cxk .photo{

            width: 82px;
            height: 82px;
            margin-left: 3px;
            margin-top: 3px;
            /*background-color: blue;*/
            display: inline-block;

        }
        /*.photo img{*/
        /*width: 82px;*/
        /*height: 82px;*/
        /*display: inline-block;*/

        /*}*/
        .swapper7 a{
            text-decoration: none;

        }
        .pop{
            width: 280px;
            height: 82px;
            /*background-color: yellow;*/
            display: inline-block;
            vertical-align:top;
            margin-top: 3px;
        }
        .cxk h3{
            display: inline-block;
            width: 190px;
            height: 25px;
            /*height: 82px;*/
            /*line-height: 82px;*/
            vertical-align: top;
            margin-left: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .cxk  h3 .game{
            font-size: 0.31rem;
            display: inline-block;
            color: #333;
            font-weight: 700;
        }
        .cxk .aline{
            width: 280px;
            height: 17px;
            /*background-color: blue;*/
            margin-left: 10px;
            margin-top: 10px;
            display: inline-block;
            color: #666666;
        }
        .pop .index-omit_1q3Tw0_{
            display: inline-block;
            margin-left: 40px;
            margin-top: 3px;
            color: #666666;
        }
        .air{
            width: 50px;
            height: 17px;
            /*background-color: yellow;*/
            display: inline-block;
            margin-left: 70px;
            background-color:  #0af;
            border-radius: 2px;
            color: #f5f5f5;
        }

        .momo{
            width:280px;
            height: 17px;
            color: #666666;
            margin-left: 10px;
            margin-top: 13px;
            display: inline-block;
        }
        .momo .list{
            color: #ddd;

        }
        .crown{
            margin-left: 60px;
        }
        .last{
            width: 280px;
            height: 85px;

            margin-left: 87px;
        }
        .cxk .ctrl{
            width: 280px;
            height: 20px;
            margin-top: 5px;
            margin-left: 15px;
        }
        .ctrl span{

            color: #666666;
        }
        .center{
            width: 200px;
            height: 50px;

            margin-top: 15px;
            display: inline-block;
        }
        .center .center1{
            width: 200px;
            height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .center1 .index-a .index-b{
            color: #FFFFFF;
        }
        .center1 .index-c{
            display: inline-block;
            -webkit-box-flex: 1;
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
            margin-left: 7px;
            color: #666666;
        }
        .last .center3{
            width: 65px;
            height: 50px;

            display: inline-block;
            vertical-align: bottom;
        }
        .center3 span{
            color: #666666;
            margin-left: 7px;
        }
    </style>
</head>

<div id="app">

<div class="header">
    <div class="header-one">
        <ul class="categories-2omWP_0">
            <li class="categories-22vDu_0 categories-1l5jO_0">全部</li>
            <li class="categories-22vDu_0">面食粥点</li>
            <li class="categories-22vDu_0">简餐便当</li>
            <li class="categories-22vDu_0">汉堡披萨</li>
            <li class="categories-22vDu_0">香锅冒菜</li>
            <li class="categories-22vDu_0">小吃炸串</li>
            <li class="categories-22vDu_0">地方菜系</li>
            <li class="categories-22vDu_0">日韩料理</li>
            <li class="categories-22vDu_0">轻食简餐</li>
        </ul>
        <div class="categories-2ylKB_0"><i class="fa fa-chevron-circle-down fa-2x"></i></div>
    </div>
    <div class="header-two">
        <a href="#">
            <span>综合排序</span>
            <i class="fa fa-caret-down "></i></a>
        <a href="#"><span>距离最近</span></a>
        <a href="#"><img
                src="https://fuss10.elemecdn.com/8/0e/4dd212d831becab6e3ebd484c0941jpeg.jpeg?imageMogr/format/webp/thumbnail/34x/"
                alt="" width="16"><span>会员领红包</span></a>
        <a href="#"><span>筛选<i class="fa  fa-filter"></i></span></a></div>
</div>
    <div class="content">
<div class="swapper7" id="kun">
    <ul>
        <li v-for="sky in skys">
            <a href="">
                <div class="cxk">
                    <!--<div class="photo">-->
                    <img :src="sky.img" alt="" class="photo">

                    <!--</div>-->
                    <div class="pop">
                        <h3><span class="game"> {{ sky.name }}</span></h3>
                        <span class="index-omit_1q3Tw0_">{{ sky.name4 }}</span>
                        <div class="aline">
                            <img :src="sky.img1" alt="">
                            <span>{{ sky.name1 }}</span>
                            <span>{{ sky.name2 }}</span>
                            <div v-if="sky.name5.length !=0" class="air">
                                {{ sky.name5 }}
                            </div>
                        </div>
                        <div class="momo">
                            <span>{{ sky.name6 }}</span>
                            <span class="list">{{ sky.name8 }}</span>
                            <span>{{ sky.name7 }}</span>

                            <span class="crown">{{ sky.name9 }}</span>
                            <span class="list">{{ sky.name10 }}</span>
                            <span>{{ sky.name11 }}</span>
                        </div>
                    </div>
                    <div class="last">
                        <div class="ctrl"><span>{{ sky.name12}}</span></div>
                        <div class="center">
                            <div class="center1">
                                        <span class="index-a"><span class="index-b"
                                                                    style="background-color: rgb(240, 115, 115);border-radius: 2px ;display: inline-block;width: 17px;height: 17px;">
              {{ sky.name13}}
            </span></span>
                                <span class="index-c">{{ sky.name14}}</span>
                            </div>
                            <div class="center1">
                                       <span class="index-a"><span class="index-b"
                                                                   style="background-color: rgb(240, 115, 115);border-radius: 2px ;display: inline-block;width: 17px;height: 17px;">
              {{ sky.name15}}
            </span></span>
                                <span class="index-c">{{ sky.name16}}</span>
                            </div>

                        </div>
                        <div class="center3"><span>{{ sky.name17}}</span><i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                </div>

            </a>

        </li>
    </ul>

</div>
</div>
</div>

    <!-- swapper -->
    <div class="swapper"></div>
    <div class="swapper"></div>
    <div class="swapper"></div>
    <div class="swapper"></div>
    <div class="swapper"></div>
    <div class="swapper"></div>
    <div class="swapper"></div>
    <div class="swapper"></div>

<div class="footer"></div>


<body>
<script>
    function resizei() {
        var fs_maxrem = 100;

        var max_width = 720;
        var w_width = window.innerWidth;//获取窗口宽度
        var fsrem = 100;//表示当前的大小


        if (w_width > max_width) {//如果超过最大值，则fs保持最大值
            fsrem = fs_maxrem;
        } else {
            fsrem = fs_maxrem * w_width / max_width;//根据当前的屏幕大小得到当前的fsrem
        }

        document.documentElement.style.fontSize = fsrem + "px";
    }

    resizei();
    //添加窗口大小改变的事件
    window.onresize = function () {
        resizei();
    }

    function peizhi() {
        //1.设置body高度等于window高度
        var height = window.innerHeight;

        document.body.style.height = height + "px";
        document.body.style.backgroundColor = "";


        //2. 设置content块等于body的高度减去一头一尾的高度
        var content_height = 0;

        content_height = height - 100 - 0;

        var contentDom = document.querySelector(".content");
        contentDom.style.height = content_height + "px";
    }

    window.onload = function () {
        peizhi()

    }
    window.onresize = function () {
        peizhi()
    }

    var vm = new Vue({
        el: '#app',
        data: {
            skys: [
                {
                    name: "茶巢(中航城店)",
                    img: "https://fuss10.elemecdn.com/9/af/ec17bf2793f6fa3a35786a85362e6jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                    img1: "",
                    name1: "4.7",
                    name2: "月售927单",
                    name4: "\b···",
                    name5: "蜂鸟专送",
                    name6: "¥20起送",
                    name7: "配送费¥1.1",
                    name8: "|",
                    name9: "2.61km",
                    name10: "|",
                    name11: "35分钟",
                    name12: "奶茶果汁",
                    name13: "减",
                    name14: "满30减10，满50减16，满105减35",
                    name15: "折",
                    name16: "折扣商品7折起",
                    name17: "7个活动"
                },
                {
                    name: "台湾风味特色套餐(兴才学院店)",
                    img: "https://fuss10.elemecdn.com/a/64/aec5db36bbcf374846801a513dc4fjpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                    img1: "",
                    name1: "4.5",
                    name2: "月售1448单",
                    name4: "\b···",
                    name5: "",
                    name6: "¥20起送",
                    name7: "配送费¥2",
                    name8: "|",
                    name9: "1.42km",
                    name10: "|",
                    name11: "32分钟",
                    name12: "盖浇饭",
                    name13: "减",
                    name14: "满15减7，满25减11",
                    name15: "特",
                    name16: "特价商品1.99元起",
                    name17: "3个活动"
                },
                {
                    name: "兴兴熏鹅",
                    img: "https://fuss10.elemecdn.com/e/d5/2894ea887cff71561ba72132e47e7jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                    img1: "",
                    name1: "4.5",
                    name2: "月售1456单",
                    name4: "\b···",
                    name5: "",
                    name6: "¥20起送",
                    name7: "免配送费",
                    name8: "|",
                    name9: "1.43km",
                    name10: "|",
                    name11: "29分钟",
                    name12: "盖浇饭",
                    name13: "减",
                    name14: "满25减15，满35减21，满47减26",
                    name15: "换",
                    name16: "特价商品2元起",
                    name17: "5个活动"
                },

                {
                    name: "粥宫壹号(软三中交和美店)",
                    img: "https://fuss10.elemecdn.com/f/2b/ba1f5303be51b51ece5bc74d01f71jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                    img1: "",
                    name1: "4.8",
                    name2: "月售1217单",
                    name4: "\b···",
                    name5: "",
                    name6: "¥20起送",
                    name7: "配送费¥2.1",
                    name8: "|",
                    name9: "1.04km",
                    name10: "|",
                    name11: "25分钟",
                    name12: "粥店",
                    name13: "减",
                    name14: "满25减17，满49减24，满79减30",
                    name15: "折",
                    name16: "折扣商品5折起",
                    name17: "8个活动"
                },
                {
                    name: "蒸佰惠黄焖鸡米饭(软三店)",
                    img: "https://fuss10.elemecdn.com/b/f2/2d0fede0454b4d7d3eaedf19c3416jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                    img1: "",
                    name1: "4.4",
                    name2: "月售948单",
                    name4: "\b···",
                    name5: "蜂鸟专送",
                    name6: "¥20起送",
                    name7: "配送费¥1.1",
                    name8: "|",
                    name9: "1.04km",
                    name10: "|",
                    name11: "30分钟",
                    name12: "黄焖鸡米饭",
                    name13: "减",
                    name14: "满20减20，满45减23，满70减36，满100减55",
                    name15: "特",
                    name16: "特价商品0.8元起",
                    name17: "6个活动"
                },
                {
                    name: "每天粥铺(软三店)",
                    img: "https://fuss10.elemecdn.com/0/b0/0ae1602d5500f34daaf0a104ecd4ejpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                    img1: "",
                    name1: "4.6",
                    name2: "月售1899单",
                    name4: "\b···",
                    name5: "蜂鸟专送",
                    name6: "¥20起送",
                    name7: "配送费¥0.1",
                    name8: "|",
                    name9: "1.76km",
                    name10: "|",
                    name11: "30分钟",
                    name12: "粥店",
                    name13: "减",
                    name14: "满25减15，满39减19，满49减23，满69减25，满79减30",
                    name15: "换",
                    name16: "特价商品2元起",
                    name17: "6个活动"
                },
                {
                    name: "曼玲粥店(集美软三店)",
                    img: "https://fuss10.elemecdn.com/7/e2/9bcc6de92c71c5f7b975a804ca7d0png.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
                    img1: "",
                    name1: "4.7",
                    name2: "月售1121单",
                    name4: "\b···",
                    name5: "",
                    name6: "¥20起送",
                    name7: "配送费¥1.6",
                    name8: "|",
                    name9: "1.41km",
                    name10: "|",
                    name11: "32分钟",
                    name12: "粥店",
                    name13: "减",
                    name14: "满25减16，满39减19，满49减22，满79减28",
                    name15: "折",
                    name16: "折扣商品3.6折起",
                    name17: "6个活动"
                }
            ]
        }
    })
</script>

</body>
</html>